<template>
  <vue3-seamless-scroll :hover="true" :hover-stop="true" :list="arrList" :step="0.3" class="seamless-warp" :copyNum="10">
    <SliderGroup :list="arrList" titlePosition="up" :titleStyle="{ height: '25px', lineHeight: '25px' }"
      :valueStyle="{ width: 'auto' }" valuePosition="up" :disabled="true" itemMaring="0 auto" />
  </vue3-seamless-scroll>
</template>
<script setup>
import SliderGroup from '@/components/SliderGroup'
import { getFaultNum } from '@/api/activeFault'

const arrList = ref([])
const faultNum = () => {
  getFaultNum().then(res => {
    arrList.value = res.data.map(item => {
      return {
        title: item.province,
        num: item.num,
        value: item.proportion,
        valueInfo: `${item.num}（${item.proportion}%）`
      }
    })
  })
}

onMounted(() => {
  faultNum()
})
</script>
<style scoped lang="scss">
.seamless-warp {
  height: calc(100% - 105px);
  overflow-y: auto;

  :deep(.slider-group-item) {

    .el-slider {
      width: 100%;
      margin: 0;

      .el-slider__runway {
        height: 20px;

        .el-slider__bar {
          height: 20px;
          background-position: center;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }

        .el-slider__button-wrapper {
          color: red;

          .el-slider__button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-position: center;
          }
        }
      }
    }
  }
}
</style>